import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import avatarIcon from '@/assets/images/user/avatar.png';
import vipCard from '@/assets/images/user/vip-card.png';
import notBuyCard from '@/assets/images/user/notBuyCard.png';
// import qrCodeurl from '@/assets/images/user/vip-qrcode.png';
import { getUserInfo, updateUserInfo } from '@/service/apis/session';
import './style.scss';

const Header = ({ userInfo, cardShop, allCount, cardId, canBuyVip }) => {
  const [_userInfo, setUserInfo] = useState(userInfo);
  const { avatar, nickname, username, user_level } = _userInfo;
  const cardInfo = {
    id: '15216273138',
    time: '2023-09-11',
    count: allCount,
    name: cardShop,
    cardId: cardId,
    index: 1,
  };
  // {
  //   id: '15216273138',
  //   time: '2023-02-11',
  //   count: 99,
  //   name: '大兴养老驿站会员卡失效日期',
  //   index: 2,
  // },
  const lookUpCardDetail = () => {
    // return;
    if (!canBuyVip) return;
    Taro.navigateTo({
      url: `/subPages/vipCardDetail/detail?isBuy=1`,
    });
  };
  const onGetUserInfo = (info: any) => {
    console.log(info);
    Taro.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: async (res) => {
        try {
          console.log(res);
          const { nickName, avatarUrl } = JSON.parse(res.rawData);
          await updateUserInfo({
            username: nickName,
            avatar: avatarUrl,
          });
          Taro.showToast({
            title: '用户头像信息更新成功',
            icon: 'success',
            duration: 2000,
          });
          const { data } = await getUserInfo();
          setUserInfo(data.user_info);
        } catch (error) {
          Taro.showToast({
            title: '头像信息更改失败',
            icon: 'error',
            duration: 2000,
          });
        }
      },
    });
  };

  const toVipDetail = () => {
    if (!canBuyVip) return;
    Taro.navigateTo({
      url: '/subPages/vipCardDetail/index',
    });
  };

  useEffect(() => {
    setUserInfo(userInfo);
  }, [userInfo]);

  return (
    <>
      <View className="user-header">
        <View className="info-wrap">
          <Image className="avator" src={avatar || avatarIcon} />
          <View>
            <View className="user-info">
              <Text className="user-name">{nickname || username}</Text>
            </View>
            <View className="user-intro">
              <View className="user-type">{user_level === 0 ? '普通用户' : '门店会员'}</View>
              <View className="user-btn">
                {userInfo.new_user && (
                  <View className="update-userinfo" onClick={onGetUserInfo}>
                    同步微信头像
                  </View>
                )}
              </View>
            </View>
          </View>
          {/* <View className="vip-qrcode">
            <Image src={qrCodeurl} />
            <Text>会员码</Text>
          </View> */}
        </View>
        {user_level > 0 ? (
          <View className="account-info">
            <View className="arrears">
              <Text className="price">0</Text>
              <Text className="desc">欠款金额（元）</Text>
            </View>
            <View className="balance">
              <Text className="price">600</Text>
              <Text className="desc">授信额度（元）</Text>
            </View>
          </View>
        ) : (
          <Image mode="widthFix" onClick={toVipDetail} className="vip-card" src={canBuyVip ? vipCard : notBuyCard} />
        )}
      </View>
      {user_level > 0 && (
        <View
          // scrollX
          // enableFlex
          // scrollWithAnimation
          className="scroll-card-wrap"
          // onScroll={() => {}}
        >
          <View className="card-wrap">
            {/* {cardList.map((item) => ( */}
            <View className="card-item" onClick={() => lookUpCardDetail()}>
              <View className="card-top">
                <View>
                  剩余<Text className="count">{cardInfo.count}</Text>次福利
                </View>
                <View className="card-index">趣驿站会员卡</View>
              </View>
              {/* <Text className="card-text card-id">会员卡号：{cardInfo.cardId}</Text> */}
              <Text className="card-text title">{cardInfo.name}</Text>
              <Text className="card-text time">有效期：{userInfo.expire_time}</Text>
              <View className="card-bottom">
                <Text>会员卡号：</Text>
                <Text>{cardInfo.cardId}</Text>
              </View>
            </View>
            {/* ))} */}
          </View>
        </View>
      )}
    </>
  );
};
export default Header;
